<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import {
  addAddress,
  AddAddressData,
  getAddressDetail,
  updateAddress,
} from "@/api/address";
import { ref } from 'vue';

let addressId=''
onLoad(async({ id }) => {
  uni.setNavigationBarTitle({
    title: id ? '修改地址' : '新建地址',
  })
  if (id) {
    // 编辑（修改）
    // 数据回显
    const res = await getAddressDetail(id);
    form.value = res;
    region.value = res.fullLocation;
  }
})

// 选择省市区地址
const region=ref('')
const regionChange=(ev:WechatMiniprogram.PickerChange)=>{
  // console.log(ev.detail);
  // 收集表单内容(省市区编码)
  const code = ev.detail.code
  form.value.provinceCode = code[0]
  form.value.cityCode = code[1]
  form.value.countyCode = code[2]
  region.value=(ev.detail.value as string[]).join('')
}

// 修改是否为默认地址
// 所有html标签的最上层类型都是Event
const isDefaultChange=(ev:WechatMiniprogram.SwitchChange | Event)=>{
// console.log(ev);
  form.value.isDefault=(ev as WechatMiniprogram.SwitchChange).detail.value?1:0
}

// 表单的数据对象
// 定义对象时需要断言
// 默认地址设置初始值
const form = ref({isDefault:0} as AddAddressData)

// 点击保存
const submitForm = async () => {
  try {
  // // 调用添加地址接口
  // await addAddress(form.value)
  // // 消息提示
  // uni.showToast({ title: '添加成功~' })
   if (addressId) {
      // 修改地址
      await updateAddress(addressId, form.value);
      // 提示用户
      uni.showToast({
        icon: "success",
        title: "修改成功",
      });
    } else {
      // 添加地址
      await addAddress(form.value);
      // 提示用户
      uni.showToast({
        icon: "success",
        title: "添加成功",
      });
    }
  // 后退到上一页
  setTimeout(() => {
    uni.navigateBack({})
  }, 300)
  } catch (error) {
    console.log(error);
  }

}
</script>

<template>
  <view class="viewport">
    <!-- 地址信息 -->
    <view class="form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input v-model="form.receiver" placeholder-style="color: #888" placeholder="请填写收货人姓名" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input
          v-model="form.contact"
          placeholder-style="color: #888"
          placeholder="请填写收货人手机号码"
        />
      </view>
      <view class="form-item">
        <text class="label">省/市/县 (区)</text>
        <picker mode="region" @change="regionChange">
          <view class="region" v-if="region">{{ region }}</view>
          <view class="placeholder" v-else>请填写收货人所在城市</view>
          <!-- 给region样式加!important提高权重 -->
          <!-- <view class="placeholder region" >{{region ||'请填写收货人所在城市'}}</view> -->
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input v-model="form.address" placeholder-style="color: #888" placeholder="街道、楼牌号信息" />
      </view>
      <view class="form-item">
        <text class="label">设置默认地址</text>
       <switch
          @change="isDefaultChange"
          :checked="form.isDefault === 1"
          color="#27ba9b"
        />
        <!-- switch无法区分 -->
        <!-- <svg>
          <switch></switch>
        </svg> -->
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="button" @tap="submitForm">保 存</view>
  </view>
</template>

<style>
page {
  background-color: #f4f4f4;
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.form .form-item {
  display: flex;
  min-height: 96rpx;
  line-height: 46rpx;
  padding: 25rpx 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
}

.form .form-item:last-child {
  border: none;
}

.form .form-item .label {
  width: 200rpx;
  color: #333;
}

.form .form-item input {
  flex: 1;
  display: block;
  height: 46rpx;
}

.form .form-item switch {
  position: absolute;
  right: -10rpx;
  transform: scale(0.7) translateY(-8px);
}

.form .form-item picker {
  flex: 1;
}

.form .form-item .region {
  color: #333;
}

.form .form-item .placeholder {
  color: #888;
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
